<template>
  <q-dialog class="my-dialog-form" v-model="isFlagShow">
    <q-card class="my-card q-mx-lg">
      <q-toolbar class="row items-center my-form-header">
        <div>
          {{dlgTitle}}
        </div>
        <q-space />
        <q-btn flat round dense icon="mdi-close" @click="close"/>
      </q-toolbar>
      <q-separator />
      <q-card-setion class="q-mx-sm">
        <q-scroll-area class="my-form-container">
          <table class="my-form-table">
            <tr class="my-row-height">
              <td class="my-label"><span style="color: red">**</span>报警名称：</td>
              <td class="my-value">
                <q-input
                  outlined
                  dense
                  v-model="param.name"
                  @blur="v$.name.$touch()"
                  :error="v$.name.$error"
                  error-message="请输入不少于2个字符！"
                />
              </td>
              <td class="my-label"><span style="color: red">**</span>项目列表：</td>
              <td class="my-value">
                <q-select
                  dense
                  outlined
                  clearable
                  options-dense
                  :options="projectArr"
                  v-model="param.project"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                  @blur="v$.project.$touch()"
                  :error="v$.project.$error"
                  error-message="请选择项目名称！"
                />
              </td>
            </tr>
            <tr class="my-row-height">
              <td class="my-label"><span style="color: red">**</span>变量名称：</td>
              <td class="my-value">
                <q-select
                  dense
                  outlined
                  clearable
                  options-dense
                  :options="variableArr"
                  v-model="param.variable"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                  @blur="v$.variable.$touch()"
                  :error="v$.variable.$error"
                  error-message="请选择变量名称！"
                />
              </td>
              <td class="my-label"><span style="color: red">**</span>报警规则：</td>
              <td class="my-value">
                <q-select
                  dense
                  outlined
                  clearable
                  options-dense
                  :options="operatorTypeArr"
                  v-model="param.operator"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                  @blur="v$.operator.$touch()"
                  :error="v$.operator.$error"
                  error-message="请选择变量名称！"
                />
              </td>
            </tr>
            <tr class="my-row-height">
              <td class="my-label">&nbsp;&nbsp;&nbsp;&nbsp;主要参数：</td>
              <td class="my-value">
                <q-input
                  outlined
                  dense
                  v-model="param.lowArg"
                />
              </td>
              <td class="my-label">&nbsp;&nbsp;&nbsp;&nbsp;辅助参数：</td>
              <td class="my-value">
                <q-input
                  outlined
                  dense
                  v-model="param.highArg"
                />
              </td>
            </tr>
            <tr class="my-row-height">
              <td class="my-label">报警通知：</td>
              <td class="my-value">
                <q-select
                  dense
                  outlined
                  options-dense
                  :options="notificationTypeArr"
                  v-model="param.notification"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                />
              </td>
              <td class="my-label">报警频次：</td>
              <td class="my-value">
                <q-input
                  outlined
                  dense
                  v-model="param.period"
                />
              </td>
            </tr>
            <tr class="my-row-height">
              <td class="my-label">&nbsp;&nbsp;推送人：</td>
              <td class="my-value">
                <q-select
                  dense
                  outlined
                  options-dense
                  :options="userArr"
                  v-model="param.user"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                />
              </td>
              <td class="my-label">&nbsp;&nbsp;&nbsp;&nbsp;排序序码：</td>
              <td class="my-value">
                <q-input
                  outlined
                  dense
                  v-model="param.sortCode"
                  @blur="v$.sortCode.$touch()"
                  :error="v$.sortCode.$error"
                  error-message="请输入不少于2个字符！"
                />
              </td>
            </tr>
            <tr>
              <td class="my-label">报警描述：</td>
              <td class="my-value">
                <q-input
                  outlined
                  type="textarea"
                  v-model="param.description"
                />
              </td>
            </tr>
          </table>
        </q-scroll-area>
      </q-card-setion>
      <q-separator />
      <q-separator />
      <div class="q-gutter-sm my-form-footer">
        <q-btn
          unelevated
          dense
          label="提交"
          type="submit"
          color="teal-3"
          @click="onSubmit"
          style="width: 80px"
        />
        <q-btn
          unelevated
          dense
          label="重置"
          type="reset"
          color="orange-3"
          @click="onReset"
          style="width: 80px"
        />
      </div>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, ref, toRefs, PropType, watch, toRef } from 'vue';
import { isObjectEmpty } from '../../../util/utils';
import { required, minLength } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core';
import { cataItem } from '../../../hook/common/useCatalogType';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';

import { AlarmItem, AlarmItemVO } from './AlarmModel';
const AmyImageUpload = defineAsyncComponent(() => import('components/basic/AmyImageUpload.vue'));

export default defineComponent({
  cname: 'AlarmDlg',
  components: {
    AmyImageUpload
  },
  props: {
    itemData: {
      type: Object as PropType<AlarmItem>,
      required: true
    },
    projectArr: {
      type: Array as PropType<cataItem[]>,
      default: () => {
        return []
      }
    },
    variableArr: {
      type: Array as PropType<cataItem[]>,
      default: () => {
        return []
      }
    },
    operatorTypeArr: {
      type: Array as PropType<cataItem[]>,
      default: () => {
        return []
      }
    },
    notificationTypeArr: {
      type: Array as PropType<cataItem[]>,
      default: () => {
        return []
      }
    },
    userArr: {
      type: Array as PropType<cataItem[]>,
      default: () => {
        return []
      }
    }
  },
  emits: ['submit-alarm-item', 'cancel-alarm-item'],
  setup (props, context) {
    //数据解构
    const {
      projectArr,
      variableArr,
      operatorTypeArr,
      notificationTypeArr,
      userArr,
      itemData
    } = toRefs(props);

    //*******************************
    //      目录操作
    //*******************************
    const {
      findCatalogLabel,
      findCatalogId
    } = useCatalogTool();

    //*******************************
    //      表单项
    //*******************************
    //窗口显示
    let isFlagShow = ref(false);

    //窗口标题
    let dlgTitle = ref('');

    //界面数据
    let param = ref<AlarmItemVO>({
      id: 0,
      name: '',
      project: '',
      variable: '',
      operator: '',
      lowArg: 0,
      highArg: 0,
      notification: '',
      period: 0,
      user: '',
      sortCode: '',
      description: ''
    });

    //关闭窗口
    const close = () => {
      isFlagShow.value = false;
      context.emit('cancel-alarm-item');
    }

    //显示窗口
    const show = (text: string) => {
      isFlagShow.value = true;
      dlgTitle.value = text;
    }

    //提交窗口
    const onSubmit = () => {
      v$.value.$validate();
      if (v$.value.$error) {
        alert('输入参数校验错误!');
      } else {
        isFlagShow.value = false;
        let item: AlarmItem = {
          id: param.value.id,
          name: param.value.name,
          projectId: findCatalogId(projectArr.value, param.value.project),
          variableId: findCatalogId(variableArr.value, param.value.variable),
          operatorId: findCatalogId(operatorTypeArr.value, param.value.operator),
          lowArg: param.value.lowArg,
          highArg: param.value.highArg,
          notificationId: findCatalogId(notificationTypeArr.value, param.value.notification),
          period: param.value.period,
          userId: findCatalogId(userArr.value, param.value.user),
          sortCode: param.value.sortCode,
          description: param.value.description,
          createTime: '',
          createUserId: 0,
          updateTime: '',
          updateUserId: 0
        };

        //发送数据
        context.emit('submit-alarm-item', item);
      }
    }

    //重置
    const onReset = () => {
      if (param.value) {
        param.value.project = '';
        param.value.name = '';
        param.value.variable = '';
        param.value.operator = '';
        param.value.lowArg = 0;
        param.value.highArg = 0;
        param.value.notification = '';
        param.value.period = 0;
        param.value.user = '';
        param.value.sortCode = '';
        param.value.description = '';
      }

      //表单验证初始化
      v$.value.$reset();
    }


    //*******************************
    //      表单校验
    //*******************************
    //配置校验规则
    const rules = {
      id: {},
      name: { required, minLength: minLength(2) },
      project: { required },
      variable: { required },
      operator: { required },
      lowArg: {},
      highArg: {},
      notification: {},
      period: {},
      user: {},
      sortCode: { },
      description: {}
    }

    //使用vuelidate，建立变量对应的校验规则
    const v$ = useVuelidate(rules, {
      id: toRef(param.value, 'id'),
      name: toRef(param.value, 'name'),
      project: toRef(param.value, 'project'),
      variable: toRef(param.value, 'variable'),
      operator: toRef(param.value, 'operator'),
      lowArg: toRef(param.value, 'lowArg'),
      highArg: toRef(param.value, 'highArg'),
      notification: toRef(param.value, 'notification'),
      period: toRef(param.value, 'period'),
      user: toRef(param.value, 'user'),
      sortCode: toRef(param.value, 'sortCode'),
      description: toRef(param.value, 'description')
    });

    //*******************************
    //      启动模块
    //*******************************
    //初始化
    const init = () => {
      if (!isObjectEmpty(itemData.value)) {
        param.value.id = itemData.value.id;
        param.value.project = findCatalogLabel(projectArr.value, itemData.value.projectId);
        param.value.variable = findCatalogLabel(variableArr.value, itemData.value.variableId);
        param.value.operator = findCatalogLabel(operatorTypeArr.value, itemData.value.operatorId);
        param.value.name = itemData.value.name;
        param.value.lowArg = itemData.value.lowArg;
        param.value.highArg = itemData.value.highArg;
        param.value.notification = findCatalogLabel(notificationTypeArr.value, itemData.value.notificationId);
        param.value.period = itemData.value.period;
        param.value.user = findCatalogLabel(userArr.value, itemData.value.userId);
        param.value.sortCode = itemData.value.sortCode;
        param.value.description = itemData.value.description;
      }

      //表单验证初始化
      v$.value.$reset();
    }

    //监听对象的所有属性
    watch(() => itemData, () => {
      init();
    }, { deep: true });

    //启动挂载组件
    onMounted(() => {
      init();
    })

    return {
      variableArr,
      itemData,

      isFlagShow,
      dlgTitle,
      param,
      v$,
      init,
      close,
      show,
      onSubmit,
      onReset
    }
  }
})
</script>

<style lang="scss" scoped>
.my-card {
  alignment: center;
  width: 800px;
  max-width: 800px;
  .my-form-container {
    text-align: center;
    padding: 5px 50px 5px 50px;
    height: 400px;
  }
}

</style>
